<template>
  <div class="list_details">
    <div class="form_details">
      <el-form ref="formInline" :model="formInline" :rules="rules" size="mini" label-position="top">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="ERP编号:" prop="erpNo">
              <el-input v-model="formInline.erpNo" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="姓名:" prop="userName">
              <el-input v-model="formInline.userName" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="岗位开始时间:" prop="startDate">
<!--              <el-input v-model="formInline.startDate" placeholder="请输入"/>-->
              <el-date-picker
                v-model="formInline.startDate"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="岗位结束时间:" prop="endDate">
<!--              <el-input v-model="formInline.endDate" placeholder="请输入"/>-->
              <el-date-picker
                v-model="formInline.endDate"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="岗位方向:" prop="futurePost">
              <el-input v-model="formInline.futurePost" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="formInline.otherCase">
            <el-form-item label="其他情况详情:" prop="otherCase">
              <el-input v-model="formInline.otherCase" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="提升情况:" prop="ascensionSituation">
              <el-input v-model="formInline.ascensionSituation" placeholder="请输入"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工作内容:" prop="job">
              <el-input
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 4}"
                placeholder="请输入内容"
                v-model="formInline.job"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="附件：" class="attach-label">
            <!-- 文件上传 -->
            <FileTable ref="fileTable" :file-data="fileData" :checkFlag="checkFlag"/>
          </el-form-item>
        </el-row>
      </el-form>
      <div class="showLeft">
        <el-button @click="goBack">取消</el-button>
<!--        <el-button-->
<!--          type="primary"-->
<!--          @click="dataFormSubmit()"-->
<!--        >确定-->
<!--        </el-button>-->
      </div>


    </div>

  </div>
</template>

<script>
  import FileTable from '@/components/FileTable'
  import axios from 'axios'
  import { Encrypt } from '../../../../utils/cryptoAES'

  const formRules = {
    erpNo: [
      { required: true, message: 'ERP编号不能为空', trigger: 'change' }
    ],
    userName: [
      { required: true, message: '姓名不能为空', trigger: 'change' }
    ],
    startDate: [
      { required: true, message: '岗位开始时间不能为空', trigger: 'change' }
    ],
    endDate: [
      { required: true, message: '岗位结束时间不能为空', trigger: 'change' }
    ],
    futurePost: [
      { required: true, message: '岗位方向不能为空', trigger: 'change' }
    ],
    otherCase: [
      { required: true, message: '其他情况详情不能为空', trigger: 'change' }
    ],
    ascensionSituation: [
      { required: true, message: '提升情况不能为空', trigger: 'change' }
    ],
    job: [
      { required: true, message: '工作内容不能为空', trigger: 'change' }
    ]
  }
  export default {
    name: 'growthDetails',
    components: {
      FileTable
    },
    data() {
      return {
        checkFlag: true,
        fileData: [
          {
            num: 1,
            typeName: '佐证材料',
            desc: '请上传佐证材料，单个文件大小不超5MB，且总数不超过10个。',
            name: '',
            fileList: [],
            businessId: '',
            businessNode: 'humanManage',
            acceptType: '.doc,.docx,.xls,.xlsx,.pdf,.txt,image/*',
            refStr: 'evidence'
          }
        ],
        formInline: {},
        rules: formRules
      }
    },
    created() {
      console.log (this.$route.query.row, '路由携带的参数')
      if (this.$route.query.id == null) {

      } else {
        this.getGrowthPlanById ()
      }

      //  this.getFileList ()
    },
    mounted() {

    },
    methods: {
      goBack() {
        this.$router.push (this.$route.query.fromPath)
      },
      async getGrowthPlanById() {
        var id = this.$route.query.id
        try {
          axios ({
            method: 'get',
            url: `/hr-xc-human-resources-perform-manage/userinfo/findGrowthPlan/${id}`
          }).then (({ data }) => {
            if (data) {
              this.formInline = data.result
            }
          })
        } catch (err) {
          this.$message.warning ('查看详情出错')
          this.$router.push (this.$route.query.fromPath)
        }
      },
      dataFormSubmit() {
        this.$refs['formInline'].validate ((valid) => {
          if (valid) {
            var uu = {
              'erpNo': this.formInline.erpNo || null,
              'userName': this.formInline.userName,
              'startDate': this.formInline.startDate,
              'endDate': this.formInline.endDate,
              'futurePost': this.formInline.futurePost,
              'otherCase': this.formInline.otherCase,
              'ascensionSituation': this.formInline.ascensionSituation,
              'job': this.formInline.job
            }
            var jsonString = JSON.stringify (uu)
            var yy = Encrypt (jsonString)
            var encodedString = encodeURIComponent (yy)
            axios ({
              url: `/hr-xc-human-resources-perform-manage/generator/deptexaminelrules/${!this.dataForm.id ? 'create' : 'update'}`,
              method: 'post',
              data: encodedString
            }).then (({ data }) => {
              if (data && data.code === '00000') {
                this.$message ({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit ('refreshDataList')
                  }
                })
              } else {
                this.$message.error (data.msg)
              }
            }).catch (error => {
              this.$message.error ('服务器访问异常，请从新登录')
            })
          }
        })
      }


      // // 获取附件
      // async getFileList(businessId = this.$route.query.id) {
      //   let fileList
      //   const { data } = await findFileList ({
      //     businessId,
      //     sysCode: 'personManage'
      //   })
      //   fileList = data
      //
      //   this.fileData.forEach (v => {
      //     v.fileList = []
      //     fileList.forEach (file => {
      //       if (v.businessNode === file.businessNode) {
      //         v.fileList.push ({
      //           id: file.fileId || file.id,
      //           oldFileName: file.fileName || file.oldFileName
      //         })
      //       }
      //     })
      //   })
      // }
    }
  }
</script>

<style scoped lang="scss">
  .list_details {
    padding: 40px 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;

    .top_back {
      font-size: 14px;
      padding: 40px 0;
      border-bottom: 2px solid rgba(70, 70, 70, 0.87);
      padding-left: 20px;

      &:hover {
        cursor: pointer;
        color: rgb(70, 70, 70);
        font-weight: 700;
      }

      .el-icon-back {
        font-size: 16px;
        color: #7d7d7d;
        transform: scaleY(1.5) scaleX(1.8);
        margin-right: 5px;
      }
    }

    .form_details {
      padding: 10px;
    }
    .showLeft{
      text-align: right;
    }
  }
</style>
